<template>  
    <view class="container">  
		
		<view class="user-section">
			<image class="bg" src="/static/mine/bg.png" v-if="loginStatus"></image>
			<view class="user-info-box" @click="navTo('/pages/user/verified')">
				<view class="portrait-box">
					<image class="portrait" v-if="!loginStatus" src="/static/missing-face.png"></image>
					<image class="portrait" v-else :src="userInfo.icon || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box" v-if="loginStatus">
					<text class="username">{{userInfo.userName || '游客'}}</text>
				</view>
				<view class="info-box" v-else>
					<text class="username" @click.stop="navTo('/pages/public/login_choose')">登录</text>
					<text class="username diving">|</text>
					<text class="username" @click.stop="navTo('/pages/public/login_choose')">注册</text>
				</view>
			</view>
			<view class="edit-info" v-if="loginStatus">
				<view v-if="!signStatus" @click="navTo('/pages/user/verified')">去认证</view>
				<view v-else>已认证</view>
			</view>
		</view>
		<view
				class="cover-container"
				:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
				@touchstart="coverTouchstart"
				@touchmove="coverTouchmove"
				@touchend="coverTouchend"
		>
			<!--<image class="arc" src="/static/arc.png"></image>-->
			<view class="order-title" @click="navTo('/pages/order/mode?state=0')">
				<view class="t">我的订单</view>
				<view class="c"><text>查看全部订单</text>
					<img class="c_icon" src="/static/common/arrow-right.png">
				</view>
			</view>
			<view class="order-section">
				<view class="order-item" @click="navTo('/pages/order/mode?state=1')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/daifukuan@2x.png" class="u-icon" alt="">
					<text>待付款</text>
					<span v-if="userNum[0]>0">{{userNum[0]}}</span>
				</view>
				<view class="order-item" @click="navTo('/pages/order/mode?state=2')"  hover-class="common-hover" :hover-stay-time="50">
					<img src="/static/mine/daishouhuo@2x.png" class="u-icon" alt="">
					<text>待收货</text>
					<span v-if="userNum[1]>0">{{userNum[1]}}</span>
				</view>
				<view class="order-item" @click="navTo('/pages/order/mode?state=3')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/daipinglun@2x.png" class="u-icon" alt="">
					<text>待评论</text>
					<span v-if="userNum[2]>0">{{userNum[2]}}</span>
				</view>
				<view class="order-item" @click="navTo('/pages/order/afterSale?state=4')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/tuikuan@2x.png" class="u-icon" alt="">
					<text>退款/售后</text>
					<span v-if="userNum[3]>0">{{userNum[3]}}</span>
				</view>
			</view>
			<view class="order-title">
				<view class="t">必备工具</view>
			</view>
			<view class="order-section or2">
				<view class="order-item" @click="navTo('/pages/coupon/index')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/youhuiquan@2x.png" alt="" class="u-icon">
					<text>我的优惠券</text>
				</view>
				<view class="order-item" @click="navTo('/pages/integral/index')"  hover-class="common-hover" :hover-stay-time="50">
					<img src="/static/mine/gerenjifen@2x.png" alt="" class="u-icon">
					<text>个人积分</text>
				</view>
				<!-- <view class="order-item" @click="navTo('/pages/coupon/center')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/lingquanzhongxin@2x.png" alt="" class="u-icon">
					<text>领劵中心</text>
				</view> -->
				<view class="order-item" hover-class="common-hover"  :hover-stay-time="50">
					<button open-type="contact" :session-from="{'userInfo':JSON.stringify(userInfo)}">
					<img src="/static/mine/kefufuwu@2x.png" alt="" class="u-icon">
					<text>客服服务</text>
					</button>
				</view>
			</view>
			<view class="order-section or2">
				<view class="order-item" @click="navTo('/pages/address/address')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/dizhi@2x.png" alt="" class="u-icon">
					<text>地址管理</text>
				</view>
				<view class="order-item" @click="navTo('/pages/appraise/mine')"  hover-class="common-hover" :hover-stay-time="50">
					<img src="/static/mine/wodepinglun@2x.png" alt="" class="u-icon">
					<text>我的评论</text>
				</view>
				<view class="order-item" @click="navTo('/pages/explain/about')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/guanyuwomen@2x.png" alt="" class="u-icon">
					<text>关于我们</text>
				</view>
				<view class="order-item" style="visibility: hidden" @click="navTo('/pages/notice/help')" hover-class="common-hover"  :hover-stay-time="50">
					<img src="/static/mine/youhuiquan@2x.png" alt="" class="u-icon">
					<text>客服服务</text>
				</view>
			</view>
			<view class="cancel" @click="goLogout" v-if="loginStatus">
				退出登录
			</view>
		</view>
    </view>
</template>  
<script>
    import {_userInfo, _judgeBingingPhone} from '../../common/vmeitime-http/user.js'
	import {_verified} from '../../common/vmeitime-http/mem.js'
	import {_logout} from '../../common/vmeitime-http/login.js'
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		data(){
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				loginStatus:false,//登陆状态
				userInfo:{},
				userNum:[0,0,0,0],
				signStatus:false//认证状态
			}
		},
		async onShow(){
            this.loginStatus = uni.getStorageSync('authInfo')?true:false;
//            let _userInfoTemp = uni.getStorageSync('wxUserInfo');
//            if(_userInfoTemp){
//                this.userInfo = _userInfoTemp
//            }
            if(this.loginStatus){
				this.userInfo = uni.getStorageSync('userInfo')
				console.log(this.userInfo)
				// this.judgeBingingPhone();
                let tempData = await _userInfo();
                uni.setStorageSync('relUserInfo',tempData.data.data);
				this.userNum[0]=tempData.data.data.waitPayNum;
				this.userNum[1]=tempData.data.data.waitReceiveNum;
				this.userNum[2]=tempData.data.data.waitEvaluateNum;
				this.userNum[3]=tempData.data.data.afterSaleNum;
                if(tempData.data.code==200){
                    setTimeout(()=>{
                        let _userInfoTemp = uni.getStorageSync('wxUserInfo');
                        if(_userInfoTemp){
                            this.userInfo = _userInfoTemp
                        }
					},600)
				}else{
                    this.userNum=[0,0,0,0];
				}
				this.gotSign();
			}else{
                this.userNum=[0,0,0,0];
			}
		},
		onLoad(){

		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
        computed: {

		},
        methods: {
			async judgeBingingPhone(){
			    let tempData = await _judgeBingingPhone()
				if(tempData.data.code==200){
			        console.log(tempData.data.data)
					if(tempData.data.data == 0){
						uni.redirectTo({
							url: "/pages/user/edit_tel?mark=loginBind"
						})
					}
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				if(!this.loginStatus){
				    if(url!=="/pages/explain/about"){
                        url = '/pages/public/login_choose';
					}
				}
				uni.navigateTo({
					url
				})
			}, 
	
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			async gotSign(){
			    let tempData = await _verified({})
				if(tempData.data.code==200){
				    this.signStatus = tempData.data.data==1?true:false
				}
			},
			async goLogout(){
			    let tempData = await _logout()
				if(tempData.data.code==200){
			        uni.clearStorage();
			        uni.clearStorageSync();
			        uni.switchTab({
			            url: '/pages/index/index'
			        });
				}
			},
        }  
    }  
</script>  
<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  /*border-radius: 10upx;!**!*/
	}
	.order-title{
		display: flex;
		padding: 30upx;
		background: #ffffff;
		border-bottom: 2upx solid #f2f2f2;
		.t{
			font-size: 32upx;
			color: $font-color-dark;
			flex:1;
			font-weight: bold;
		}
		.c{
			font-size: 24upx;
			color: #989898;
			display: flex;
			align-items: center;
			.c_icon{
				width: 48upx;
				height: 48upx;
			}
		}
	}
	.user-section{
		height: 392upx;
		padding: 100upx 30upx 0;
		position:relative;
		background: #989898;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 392upx;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		flex-direction: column;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 4upx;
			color: #ffffff;
			/*margin-left: 20upx;*/
			&.diving{
				margin: 0 20upx;
			}
		}
		.info-box{
			margin-top: 10upx;
		}
	}
	.edit-info{
		font-size: 28upx;
		color: #ffffff;
		position: absolute;
		bottom: 0;
		right: 0;
		width:161upx;
		height:60upx;
		text-align: center;
		line-height: 60upx;
		background:rgba(1,127,1,1);
		border-radius:30upx 0upx 0upx 0upx;
	}
	.cover-container{
		background: $page-color-base;
		/*<!--margin-top: -150upx;-->*/
		/*padding: 0 30upx;*/
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-bottom: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;
			background: #ffffff;
			.u-icon{
				width: 68upx;
				height: 68upx;
			}
			span{
				position: absolute;
				right: 25upx;
				top: 8upx;
				font-size: 24upx;
				color: #ffffff;
				background: #017F01;
				width: 33upx;
				height: 33upx;
				/*padding: 1rpx 11rpx;*/
				/*text-align: center;*/
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				/*line-height: 35rpx;*/
			}
			button{
				display: block;
				border: none;
				outline: none;
				width: 100%;
				padding: 0;
				line-height: 33upx;
				height: 106upx;
				background: #ffffff;
				text{
					display: block;
					font-size: $font-sm;
					color: $font-color-dark;
				}
			}
			button::after{
				border: none;
			}
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: $uni-color-primary;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
		&.or2{
			border-bottom: 2upx solid #f2f2f2;
			margin-bottom: 0;
		}
	}
	.cancel{
		background: #ffffff;
		width: 100%;
		height: 100upx;
		margin: 20upx 0;
		line-height: 100upx;
		text-align: center;
		font-size: 35upx;
	}
</style>